---
title: Scroll Area
description: A container component with customizable scrollbars for overflowing content.
metaDescription: Scroll Area component for React and Solid.js with customizable scrollbars for overflowing content. Create smooth scrolling experiences with styled containers.
category: layout
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/scroll-area.ts
  ark: https://ark-ui.com/docs/components/scroll-area
---


<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { ScrollArea } from '@/components/ui'
```

```tsx
<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content />
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>
```

## Examples

### Visibility

Use the `scrollbar` prop to change the scrollbar visibility behavior.

<ComponentExample name="variants" />

### Sizes

Use the `size` prop to change the size of the scroll area. This affects the scrollbar thickness and content padding.

<ComponentExample name="sizes" />

### Horizontal

The scroll area automatically supports horizontal scrolling when content overflows horizontally.

<ComponentExample name="horizontal" />

### Virtualization

Use `@tanstack/react-virtual` to handle large datasets efficiently by rendering only visible items.

<ComponentExample name="virtualization" />

### Infinite Scroll

Here is an example of implementing infinite scroll with the scroll area component.

<ComponentExample name="infinite-scroll" />

## Props

### Root

<PropsTable part="Root" />

### Scrollbar

<PropsTable part="Scrollbar" />